<template>
  <div class="my-pass">
    <el-table
      :data="algorithmList"
      style="width:100%"
      :row-style="tableRowStyle"
      :cell-class-name="tableColumnClassName"
      :header-cell-style="tableHeaderColor"
    >
      <el-table-column prop="rank" label="排名" width="60">
        <template slot-scope="scope">
          <el-tag
            effect="dark"
            class="my-rank-el-tag"
            :color="
              scope.row.rank === 1
                ? '#1A936F'
                : 2 <= scope.row.rank && scope.row.rank <= 3
                ? '#4EA3DD'
                : 4 <= scope.row.rank && scope.row.rank <= 14
                ? '#b2bec3'
                : '#E6E24D'
            "
            >{{ scope.row.rank }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column prop="teamName" label="球队" width="170">
        <template slot-scope="scope">
          <div class="score-team-name">
            <img class="score-team-logo" :src="scope.row.teamImg" alt="" />
            <span class="team-name-text" @click="enterTeam(scope.row.teamId)">{{
              scope.row.teamName
            }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="seasonScore" label="积分" width="115">
      </el-table-column>
      <el-table-column prop="totalScore" label="综合" sortable width="115">
      </el-table-column>
      <el-table-column prop="attackScore" label="进攻" sortable width="115">
      </el-table-column>
      <el-table-column prop="defenseScore" label="防守" sortable width="115">
      </el-table-column>
      <el-table-column prop="organizeScore" label="组织" sortable width="115">
      </el-table-column>
      <el-table-column prop="setScore" label="定位球" sortable width="130">
      </el-table-column>
      <el-table-column prop="skillScore" label="技巧" sortable width="115">
      </el-table-column>
      <el-table-column prop="passScore" label="传球" sortable width="115">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Algorithm",
  data() {
    return {
      leagueId: 6,
      //球队评分数据
      algorithmList: [],
    };
  },
  props: {
    season: {
      type: String,
      default() {
        return "2019赛季";
      },
    },
  },
  watch: {
    season(newSeason) {
      this.getAlgorithmList(parseInt(newSeason));
    },
  },
  methods: {
    //设置单个单元格的样式
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (
        rowIndex === 0 &&
        (columnIndex === 3 ||
          columnIndex === 4 ||
          columnIndex === 5 ||
          columnIndex === 6 ||
          columnIndex === 7 ||
          columnIndex === 8 ||
          columnIndex === 9)
      ) {
        return {
          "background-color": "#F1F6F9",
          "padding-left": "21px",
          "padding-top": "20px",
        };
      }
      return { "background-color": "#F1F6F9" };
    },

    //设置表格行的样式
    tableRowStyle({ row, rowIndex }) {
      return { "background-color": "#F1F6F9" };
    },
    //class回调
    tableColumnClassName({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        return "myColumn";
      }
      return "";
    },
    //获取算法数据
    async getAlgorithmList(seasonId) {
      //当前联赛Id 中超or中甲
      const leagueId = this.leagueId;
      //获取接口数据
      const { data } = await axios.get(
        `http://8.141.159.127:3000/api/v1/matches/aboutmatches/ranklist/${leagueId}/${seasonId}`
      );
      //赋值给algorithmList
      this.algorithmList = data;
    },
    //点击球队进入球队页面
    enterTeam(teamId) {
      this.$router.push({ name: "singleTeam", params: { teamId } });
    },
  },
  created() {
    this.getAlgorithmList(2019);
  },
};
</script>

<style scoped>
.my-pass {
  width: 1165px;
  height: 821px;
  color: #656f73;
  background-color: blue;
  margin: auto;
}
.el-table {
  font-size: 20px;
}

.my-pass /deep/ .el-table td {
  padding: 8px 0; /*no*/
  text-align: center;
}
.my-pass /deep/ .el-table th {
  text-align: center;
}
.my-pass /deep/ .is-leaf {
  padding: 14px 0; /*no*/
}

.my-el-tag {
  cursor: pointer;
  margin-left: 3px;
  display: inline-block;
  width: 30px;
  height: 30px;
  padding: 4px 0;
  line-height: 20px;
  font-size: 14px;
  border-width: 0;
  border-style: solid;
  border-radius: 4px;
  box-sizing: border-box;
  white-space: nowrap;
  text-align: center;
}
.my-rank-el-tag {
  margin-left: 3px;
  display: inline-block;
  width: 30px;
  height: 30px;
  padding: 4px 0;
  line-height: 20px;
  font-size: 14px;
  border-width: 0;
  border-style: solid;
  border-radius: 4px;
  box-sizing: border-box;
  white-space: nowrap;
  text-align: center;
}
.table-annotate {
  width: 350px;
  height: 40px;
  /*background-color: red;*/
  margin-left: 31px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.champions-league {
  width: 25px;
  height: 25px;
  background-color: #1a936f;
  border-radius: 4px;
}
.play-off {
  width: 25px;
  height: 25px;
  background-color: #4ea3dd;
  border-radius: 4px;
}
.relegation {
  width: 25px;
  height: 25px;
  background-color: #e6e24d;
  border-radius: 4px;
}
.score-team-logo {
  width: 30px;
  height: 30px;
}
.score-team-name {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 20px;
}
.team-name-text {
  margin-left: 20px;
}
.active {
  color: #606266;
  text-decoration: none;
}
.my-pass /deep/ .el-table td {
  padding: 8px 0; /*no*/
  font-size: 18px;
  text-align: center;
  font-weight: bold;
}
.my-pass /deep/ .el-table th {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}
.my-pass /deep/ .is-leaf {
  padding: 18px 0; /*no*/
  font-weight: bold;
  color: #909399;
}
</style>
